<template>
  <div class="view-cover">
    <div
      class="bg"
      :style="{
        background: 'url(\'' + src + '\')',
      }"
    ></div>
    <div class="mask">
      <div class="tittle">
        <!-- <i class="el-icon-link"></i> -->
        <h1><slot name="tit"></slot></h1>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ViewCover',
  props: {
    src: {
      type: String,
      default: './background/default.jpg',
    },
  },
}
</script>

<style lang="stylus" scoped>
.view-cover
  position relative
  height: 400px;
  .bg
    position absolute
    height:400px
    width: 100% /* 100vw 会在纵向滚动条出现时, 被挤出横向滚动条 */
    background-repeat: no-repeat !important
    background-size: cover !important
    background-color: #dff6fc !important
    // 背景图片位置固定
    background-attachment: fixed !important
    background-position: center bottom !important
    opacity 0.8
  .mask
    background var(--mask)
.tittle
  display flex
  height 400px
  justify-content center
  align-items center
  h1
    height: 85px
    padding-bottom 5px
    font-size: 80px;
    letter-spacing .5rem
    font-family: '隶书', 'STXinwei','KaiTi'
    color: #eee;
    text-decoration none
    box-sizing: border-box
    transition: all .1s
    &:hover
      border-bottom:5px solid #ff638a
  // background: -webkit-linear-gradient(
  //   left,
  //   red,
  //   orange,
  //   blue,
  //   rgb(141, 167, 141)
  // );
  // background-clip: text;
  // -webkit-background-clip: text;
  // -webkit-text-fill-color: transparent;
  // background-size: 200% 100%;
  // animation: masked-animation 5s infinite linear;
</style>
